   <template>
  <div>
    <Hedar> </Hedar>
    <div class="logoImg">
      <p class="lOgin_search">

        <span>
            购物车
          </span>
      </p>
    </div>
    <div class="car_box">
      <span class="car_box_title ">全部商品3000</span>
    </div>
    <div class="good_list">
      <div class="all_check">
        <label>
          <input type="checkbox" class="goods-check" id="AllCheck" @click="AllChecka($event)">全选</label>
      </div>
       <!--一个店铺 -->
      <div class="one-shop">
        <div class="assd">
          <label>
            <input type="checkbox" class="goods-check ShopCheck" @click="ShopChecka($event)">店铺全选</label>
          <!-- 店铺合计 -->
          <div class="shop-total" style="display: none;">
            ￥<span class="shop-total-amount ShopTotal">0</span>
          </div>
         <p style="float:right;">
           配送方式:
          <select>
            <option value ="0">送货上门</option>
            <option value ="1">店铺自取</option>
          </select>
         </p>
        </div>

        <!-- 一个商品 -->
        <div class="one-goods">
          <div class="goods-msg">
            <label>
              <input type="checkbox" class="goods-check GoodsCheck goods-check_w" @click="GoodsChecka($event)">
            </label>
            <dl class="gool_s">
              <dt><img src="../assets/bigbanner.png"/></dt>
              <dd>
                <p>地中海风格儿童房灯</p>
                <p>￥ <span class="shop-total-amount GoodsPrice">20.00</span></p>
              </dd>
            </dl>

            <!-- 单条商品合计 -->
            <div class="shop-total shop-totals">
              ￥<span class="shop-total-amount ShopTotal1">20.00</span>
            </div>
            <div class="btn_aas">
            <button type="button" class="minus" @click="minusa($event)">-</button>
            <input type="text" class="am-num-text" value="1" />
            <button type="button" class="plus" @click="plusa($event)">+</button>
            </div>
            <button class="del_btn">删除</button>
          </div>
        </div>
      </div>

      <!-- 总计 -->
      <div class="all-total">
        <label>
          <input type="checkbox" class="goods-check" id="AllCheck1"  @click="AllChecka($event)">全选 &nbsp;&nbsp;&nbsp;&nbsp;</label>
        <p>删除选中商品</p>
        <div class="all-btun">
          <p>已选中<span style="color:red;">3</span>件商品</p>
         <p> 总价:<span style="color:red;">￥</span>
          <span style="color:red;" class="shop-total-amount" id="AllTotal">0</span></p>
          <button>去结算</button>
        </div>

      </div>
    </div>

    <Footers></Footers>


  </div>
</template>
<script>
  import Footers from'@/components/Footers'
  import Bton from'@/components/Bton'
  import Hedar from'@/components/Hedar'
  export default {
    data () {
      return {
        currentPage3: 5
      }
    },
    methods: {
       TotalPrice: function() {
                  var allprice = 0; //总价
                  $(".one-shop").each(function() { //循环每个店铺
                    var oprice = 0; //店铺总价
                    $(this).find(".GoodsCheck").each(function() { //循环店铺里面的商品
                      if ($(this).is(":checked")) { //如果该商品被选中
                        var num = parseInt($(this).parents(".one-goods").find(".am-num-text").val()); //得到商品的数量
                        var price = parseFloat($(this).parents(".one-goods").find(".GoodsPrice").text()); //得到商品的单价
                        var total = price * num; //计算单个商品的总价
                        oprice += total; //计算该店铺的总价
                      }
                      $(this).closest(".one-shop").find(".ShopTotal").text(oprice.toFixed(2)); //显示被选中商品的店铺总价
                    });
                    var oneprice = parseFloat($(this).find(".ShopTotal").text()); //得到每个店铺的总价
                    allprice += oneprice; //计算所有店铺的总价
                  });
                  $("#AllTotal").text(allprice.toFixed(2)); //输出全部总价
                },
      // 数量减
      minusa: function(e) {
//         console.log("111")
                var t = $(e.currentTarget).parent().find('.am-num-text');
                t.val(parseInt(t.val()) - 1);
                if (t.val() <= 1) {
                  t.val(1);
                }
                var num = parseInt($(e.currentTarget).parents(".one-goods").find(".am-num-text").val()); //得到商品的数量
                var price = parseFloat($(e.currentTarget).parents(".one-goods").find(".GoodsPrice").text()); //得到商品的单价
                var total = price * num; //计算单个商品的总价
                $(e.currentTarget).closest(".one-goods").find(".ShopTotal1").text(total)
                this.TotalPrice();
              },
      // 数量加
      plusa: function(e) {
            var t = $(e.currentTarget).parent().find('.am-num-text');
            t.val(parseInt(t.val()) + 1);
            if (t.val() <= 1) {
              t.val(1);
            }
            var num = parseInt($(e.currentTarget).parents(".one-goods").find(".am-num-text").val()); //得到商品的数量
            var price = parseFloat($(e.currentTarget).parents(".one-goods").find(".GoodsPrice").text()); //得到商品的单价
            var total = price * num; //计算单个商品的总价
            $(e.currentTarget).closest(".one-goods").find(".ShopTotal1").text(total)
            this.TotalPrice();
      },
      // 点击商品按钮
      GoodsChecka: function(e) {
          var goods = $(e.currentTarget).closest(".one-shop").find(".GoodsCheck"); //获取本店铺的所有商品
          var goodsC = $(e.currentTarget).closest(".one-shop").find(".GoodsCheck:checked"); //获取本店铺所有被选中的商品
          var Shops = $(e.currentTarget).closest(".one-shop").find(".ShopCheck"); //获取本店铺的全选按钮
          if (goods.length == goodsC.length) { //如果选中的商品等于所有商品
            Shops.prop('checked', true); //店铺全选按钮被选中
            if ($(".ShopCheck").length == $(".ShopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量
              $("#AllCheck").prop('checked', true); //全选按钮被选中
              $("#AllCheck1").prop('checked', true); //全选按钮被选中
              this.TotalPrice();
            } else {
              $("#AllCheck").prop('checked', false); //else全选按钮不被选中
              $("#AllCheck1").prop('checked', false); //else全选按钮不被选中
              this.TotalPrice();
            }
          } else { //如果选中的商品不等于所有商品
            Shops.prop('checked', false); //店铺全选按钮不被选中
            $("#AllCheck").prop('checked', false); //全选按钮也不被选中
            $("#AllCheck1").prop('checked', false); //全选按钮也不被选中
            // 计算
            this.TotalPrice();
            // 计算
          }
        },
      // 点击店铺按钮
      ShopChecka:function(e) {
            if ( $(e.currentTarget).prop("checked") == true) { //如果店铺按钮被选中
              $(e.currentTarget).parents(".one-shop").find(".goods-check").prop('checked', true); //店铺内的所有商品按钮也被选中
              if ($(".ShopCheck").length == $(".ShopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量
                $("#AllCheck").prop('checked', true); //全选按钮被选中
                $("#AllCheck1").prop('checked', true); //全选按钮被选中
                this.TotalPrice();
              } else {
                $("#AllCheck").prop('checked', false); //else全选按钮不被选中
                $("#AllCheck1").prop('checked', false); //else全选按钮不被选中
                this.TotalPrice();
              }
            } else { //如果店铺按钮不被选中
              $(e.currentTarget).parents(".one-shop").find(".goods-check").prop('checked', false); //店铺内的所有商品也不被全选
              $("#AllCheck").prop('checked', false); //全选按钮也不被选中
              $("#AllCheck1").prop('checked', false); //全选按钮也不被选中
              this.TotalPrice();
            }
           },
            // 点击全选按钮
      AllChecka:function(e) {
                  if ($(e.currentTarget).prop("checked") == true) { //如果全选按钮被选中
                    $(".goods-check").prop('checked', true); //所有按钮都被选中
                    this.TotalPrice();
                  } else {

                    $(".goods-check").prop('checked', false); //else所有按钮不全选
                    this.TotalPrice();
                  }
                  $(".ShopCheck").change(); //执行店铺全选的操作
        }

  },
    mounted:function(){
      if(sessionStorage.getItem('login')){
        this.logina=false
      }else{
        this.$router.push({path:'/Entry'})
      }

    },
    components:{
      Footers,
      Bton,
      Hedar
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .logoImg{
    width:100%;
    height:120px;
    background:url(../assets/logobig.png) no-repeat -20px top;
    overflow: hidden;
  }
  .logoImg .lOgin_search{
    width:490px;
    height:38px;
    margin:40px 0 0 282px;
  }
  .logoImg .lOgin_search input{
    width:410px;
    height:38px;
    background: #eaeaea;
    float:left;
  }
  .logoImg .lOgin_search span{
    width:80px;
    height:38px;
    line-height: 38px;
    float:left;
    color:black;
    font-size: 22px;
  }
  .car_box{
    width:1200px;
    height:22px;
    margin:0 auto;
    font-size:16px;
    border-bottom: 1px solid #e5e5e5;
  }

  .car_box .car_box_title{
    float:left;
    border-bottom: 2px solid #e64346;
  }
  .good_list{
    width:1200px;
    min-height:600px;
    margin:0 auto;
    /*background: pink;*/
  }
  .all_check{
    width:100px;
    height:56px;
  }
  .one-shop{
    width:1200px;
    min-height:280px;
    /*background:#f8f6f6;*/
  }
  .one-shop .assd{
    width:1200px;
    height:40px;
    /*background:#f8f6f6;*/
    text-align: left;
    line-height:40px;
    overflow: hidden;
    display: block;
  }
  .one-goods{
    width:1200px;
    height:118px;
    text-align: left;
    /*overflow: hidden;*/
  }
  .goods-msg{
    width:100%;
    height:106px;
    float:left;
    background:#f8f6f6;
    padding-top :12px;
    border:1px solid #d2d2d2;
  }
  .goods-msg label{
    float:left;
  }
  .shop-total{
    float:left;
    margin-right:30px;
    width:80px;
    /*display: none;*/

  }
  .gool_s{
   float:left;
    width:540px;
    height:93px;
    /*background:#007aff;*/
    margin-right: 135px;

  }
  .gool_s dt{
    width:88px;
    height:88px;
    float:left;
  }
  .gool_s dd{
    width:400px;
    height:100%;
    float:left;
  }
  .gool_s dd p{
    width:100%;
    line-height: 40px;
    text-indent: 15px;
  }
  .gool_s dt img{
    width:100%;
    height:100%;
  }
  .shop-totals{
    margin:15px 0;
  }
  .btn_aas{
    float:left;
    margin:15px 0;
  }
  .del_btn{
    float:left;
    margin:15px 15px 15px 150px;
    width:100px;
  }
  .am-num-text{
    width:30px;
    border:1px solid #999999;
  }
  .minus,.plus{
    width:20px;
  }

  .goods-check {
    width: 20px;
    height: 20px;

  }
.goods-check_w{
  margin: 30px 20px 0 20px;
}
.all-total{
  width:100%;
  height:58px;
  line-height: 58px;
  border:1px solid #cacaca;
  background:#ededed;
  text-align: left;
}
  .all-total p{
    display: inline-block;
  }
  .all-btun{
    width:50%;
    height:100%;
    float:right;
    text-align: right;
  }
  .all-btun p{
    width:180px;
    height:100%;
    text-align: left;
  }
  .all-btun button{
    width:80px;
    height:100%;
    background:red;
    border:none;
    color:#ffffff;
  }
</style>
